import React from 'react';
import { Table, Tag } from 'antd';
import { Icon } from '@/pages/Recruitment/components';
import { newTabProps } from '@/utils/tab';
import { history } from 'umi'
import { FormContent } from '../../components';
import { AssessTag } from '.';

const TYPE_MAP = {
    weekly: '周评',
    monthly: '月评',
    quarterly: '季评'
};

const TAG_MAP = {
    0: (
        <Tag color="red" style={{ background: 'none', border: 'none' }}>
            不合格
        </Tag>
    ),
    1: (
        <Tag color="green" style={{ background: 'none', border: 'none' }}>
            合格
        </Tag>
    ),
    2: (
        <Tag color="red" style={{ background: 'none', border: 'none' }}>
            需观察
        </Tag>
    )
};

export default function AssessResult({ data = [], assessSetting, levels }) {
    const { showTask = true, showHR = true } = assessSetting || {};
    const showAssessHR = showHR && data.some(item => item.period === 'monthly');

    const hrColumns = {
        title: '人事评价',
        dataIndex: 'evaluationType',
        width: '0px',
        render(status) {
            return TAG_MAP[status];
        }
    };
    const sysColumn = {
        title: '系统评估',
        dataIndex: 'level',
        align: 'center',
        render(_, row) {
            return (
                <div>
                    {showTask && (
                        <>
                            <span style={{ padding: 8 }}>任务结果</span>
                            {TAG_MAP[row.taskResult] || (
                                <Tag style={{ background: 'none', border: 'none' }}>待评估</Tag>
                            )}
                        </>
                    )}
                    {showHR && (
                        <>
                            <span style={{ padding: 8 }}>考勤情况</span>
                            {TAG_MAP[row.attendanceResult] || (
                                <Tag style={{ background: 'none', border: 'none' }}>待评估</Tag>
                            )}
                        </>
                    )}
                </div>
            );
        }
    };

    const hrColumnsRest = showAssessHR ? [hrColumns] : [];
    const sysColumnsRest = showTask || showHR ? [sysColumn] : [];

    const columns = [
        {
            title: '评估类型',
            dataIndex: 'period',
            width: 80,
            render: text => TYPE_MAP[text]
        },
        {
            title: '考评周期',
            dataIndex: 'periodStart',
            render: (text, row) => `${text} ~ ${row.periodEnd}`
        },
        {
            title: '能力综合分',
            dataIndex: 'score',
            render: (score, row) => (
                <>
                    <span style={{ marginRight: 8 }}>{`${score} /`}</span>
                    <AssessTag title={row.level} onlyText levels={levels} />
                </>
            )
        },
        ...hrColumnsRest,
        ...sysColumnsRest,
        {
            title: '操作',
            dataIndex: 'operation',
            align: 'center',
            width: 100,
            render: (text, row) => (
                <Icon
                    title="查看详情"
                    type="listfunction_viewinterview_icon_default"
                    onClick={() => {
                        history.push({
                            pathname: '/office/personnelManagement/onboardAndLeave/informal/process/detail',
                            query: {
                                id: row.detailId
                            },
                            ...newTabProps
                        });
                    }}
                />
            )
        }
    ];

    return (
        <FormContent>
            <Table rowKey="id" columns={columns} dataSource={data} pagination={false} style={{ width: 950 }} bordered />
        </FormContent>
    );
}
